
<template>
  <div class="ant-card ant-card-body">
    <div class="menu-box">
      <a-row :gutter="10">
        <!-- 右侧菜单 start -->
        <a-col :md="10" :sm="24" style="margin-bottom: 10px;">
          <span>评分年月：</span>
          <a-select
            v-if="!yearMonthList.loading"
            :value="yearMonthList.val.text"
            @change="changeDate"
          >
            <a-select-option v-for="date in yearMonthList.arr" :key="date.value">{{ date.text }}</a-select-option>
          </a-select>
          <a-select v-else :defaultValue="'数据加载中'" disabled></a-select>
        </a-col>
      </a-row>

      <a-row>
        <!-- :rowSelection="{ onChange: onSelectChange ,onSelect: handleSelect}" -->
        <a-table
          ref="table"
          size="small"
          :scroll="{ x: true }"
          :columns="columns"
          :dataSource="loadData"
          :showAlertInfo="false"
          :customRow="handleClickRow"
          :pagination="false"
        >
          <span slot="tags" slot-scope="tags">
            <a-tag :color="tags=='审核中'||tags=='已审核'||tags=='已初审' ? 'blue' : 'red'">{{tags}}</a-tag>
          </span>

          <div slot="action" slot-scope="record">
            <a-button
              v-if="0 && (record.auditStatus==1||record.auditStatus==4)"
              type="primary"
              icon="check-circle"
              slot="action"
              @click.stop="tj(record.indexGroup,1)"
            >提交</a-button>
            <a-button
              v-else-if="record.auditStatus==2"
              type="primary"
              icon="check"
              slot="action"
              @click.stop="tj(record.indexGroup,0)"
            >审核</a-button>
          </div>
        </a-table>
      </a-row>

      <a-row :gutter="10" style="margin-top: 15px;">
        <a-table
          :columns="columnsController"
          :dataSource="dataController"
          bordered
          :pagination="false"
          :scroll="{ x:this.rowWidth,y: 500 }"
          :loading="loading2"
          :rowClassName="minor"
        >
          <template slot="name" slot-scope="text">
            <a href="javascript:;">{{text}}</a>
          </template>
          <template slot="title" slot-scope="currentPageData">{{detailsTitle}}</template>
        </a-table>
      </a-row>
    </div>

    <!-- 弹窗 -->
    <a-modal
      :title="title"
      :width="500"
      :visible="visible"
      :confirmLoading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
      cancelText="关闭"
      okText="提交"
    >
      <a-spin :spinning="confirmLoading">
        <a-form :form="form">

          <a-row :gutter="{ xs: 8, sm: 16, md: 24, lg: 32 }">
            <a-col>
              <a-form-item
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
                label="审核阶段"
                style="margin-right: -35px">
                <a-radio-group name="radioGroup" :defaultValue="auditStep" @change="changeStep">
                  <a-radio value="1">初审</a-radio>
                  <a-radio value="2">终审</a-radio>
                </a-radio-group>
              </a-form-item>
            </a-col>
          </a-row>

          <a-row :gutter="{ xs: 8, sm: 16, md: 24, lg: 32 }">
            <a-col>
              <a-form-item
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
                label="审核结果"
                style="margin-right: -35px"
              >
                <a-radio-group name="radioGroup" :defaultValue="auditType" @change="statisticst">
                  <a-radio value="atAccept">同意</a-radio>
                  <a-radio value="atReject">拒绝</a-radio>
                </a-radio-group>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row class="form-row" :gutter="24">
            <a-col>
              <a-form-item
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
                label="审核意见"
                style="margin-right: -35px"
              >
                <a-textarea
                  placeholder="请输入...."
                  v-decorator="['auditComments', validatorRules.auditComments ]"
                  :autosize="{ minRows: 8, maxRows: 8 }"
                />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </a-spin>
    </a-modal>
  </div>
</template>
<script>
/**
 * api 接口
 *
 * getYearMonthList => 获取评分年月信息
 * auditDatagrid   1
 * auditDetails 2
 * */
import { getYearMonthList, auditDatagrid, auditDetails, auditAction } from '@/api/api.js'

/* 封装通用 api 服务 */
import { apiService } from '@/api/api.service.js'

export default {
  name: 'performanceExamine',
  components: {},

  /* 组件参数 */
  data() {
    return {
      /* 查询条件信息 */
      queryParam: {
        pageNo: 1,
        pageSize: 5
      },

      /* 年月下拉菜单 */
      yearMonthList: {
        loading: false,
        arr: [], // 可选择的年月列表
        value: {} // 已选年月，默认数组第 0 个
      },

      /* 源数据，用来对比用户有没有修改 */
      resData: {},
      /* 配置编辑时展示 input 输入框还是 textarea 文本框 */
      editAttr: [
        { name: '评分', attr: 'input', key: 'grade' },
        { name: '评分意见', attr: 'textarea', key: 'indexValueComments' }
      ],
      yearMonth: '',
      auditStep: '1',   // 审核阶段 1:初审; 2:终审
      auditType: 'atAccept',
      indexGroup: '',
      // atReject
      /* 标记数据是否在加载中 */
      loading: true,
      /* 弹窗信息 */
      modalInfo: {
        show: false,
        title: '',
        date: '',
        departInfo: {}
      },
      loadData: [],
      columns: [
        {
          title: '绩效归属',
          dataIndex: 'indexGroupName',
          align: 'center'
        },
        {
          title: '评分年份',
          dataIndex: 'indexYear',
          align: 'center'
        },
        {
          title: '评分月份',
          dataIndex: 'indexMonth',
          sorter: false,
          needTotal: true,
          align: 'center'
          // customRender: (text) => text + ' 次'
        },
        {
          title: '审批状态',
          dataIndex: 'auditStatusName',
          sorter: false,
          align: 'center',
          scopedSlots: { customRender: 'tags' }
        },
        {
          title: '审批意见',
          dataIndex: 'auditComments',
          sorter: false,
          align: 'center'
        },
        {
          title: '审批提交时间',
          dataIndex: 'submitTime',
          sorter: false,
          align: 'center'
        },
        {
          title: '审批时间',
          dataIndex: 'auditTime',
          sorter: false,
          align: 'center'
        },
        { title: '操作', dataIndex: '', key: 'x', scopedSlots: { customRender: 'action' } }
      ],
      detailsTitle: '',
      columnsController: [],
      dataController: [],
      loading2: false,
      //
      title: '审核',
      visible: false,
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      rowWidth:0,
      confirmLoading: false,
      form: this.$form.createForm(this),
      validatorRules: {
        auditComments: {
          rules: [{ required: true, message: '请输入审核意见!' }]
        }
      }
    }
  },

  created() {
    /* 获取评分年月 */
    this.yearMonthList.loading = true
    apiService(getYearMonthList())
      .then(res => {
        this.yearMonthList = {
          loading: false,
          arr: res.result, // 可选年份下拉选项
          val: res.result[0] // 默认选第 0 项
        }

        this.searchQuery() // 查询数据
      })
      .catch(error => {
        this.yearMonthList.loading = false
        this.$message.error(error.message)
      })
    // (this.loadData = [
    //   {
    //     indexGroup: 'C', //绩效归属-->(隐藏字段)
    //     indexGroupName: '一线单位', //绩效归属
    //     indexYear: '2019', //评分年份
    //     indexMonth: '12', //评分月份
    //     auditStatus: '1', //审批状态(1:待申请；2:审核中; 3:已审核; 4:已退回)-->(隐藏字段)
    //     auditStatusName: '待申请', //审批状态(1:待申请；2:审核中; 3:已审核; 4:已退回)
    //     submitTime: '2020-01-14 15:15:29',
    //     auditTime: '2020-01-14 15:15:29',
    //     auditComments: '审批意见' //评分部门名称
    //   },
    //   {
    //     indexGroup: 'G', //绩效归属-->(隐藏字段)
    //     indexGroupName: '一线单位', //绩效归属
    //     indexYear: '2019', //评分年份
    //     indexMonth: '12', //评分月份
    //     auditStatus: '3', //审批状态(1:待申请；2:审核中; 3:已审核; 4:已退回)-->(隐藏字段)
    //     auditStatusName: '待申请', //审批状态(1:待申请；2:审核中; 3:已审核; 4:已退回)
    //     submitTime: '2020-01-14 15:15:29',
    //     auditTime: '2020-01-14 15:15:29',
    //     auditComments: '审批意见' //评分部门名称
    //   }
    // ])
  },
  /* 函数方法 */
  methods: {
    /* 监听日期改变 */
    changeDate(code) {
      let arr = this.yearMonthList.arr
      this.yearMonthList.val = arr.find(item => {
        return item.value === code
      })

      this.updatePage(1)
    },

    /* 更新页面数据 */
    updatePage(pageNo) {
      this.queryParam.pageNo = pageNo
      ;(this.dataController = []), (this.detailsTitle = ''), (this.columnsController = []), this.searchQuery()
    },

    // 表1
    searchQuery() {
      let t = this
      t.loading = true
      // 组装接口需要的参数
      let params = {
        indexYearMonth: this.yearMonthList.val.value // 日期格式 YYYYMM
        // pageNo: t.queryParam.pageNo, // 页数
        // pageSize: t.queryParam.pageSize // 每页返回多少条数据
      }
      apiService(auditDatagrid(params))
        .then(res => {
          t.loading = false
          let resData = res.result
          if (!resData || (resData && resData.records && resData.records.length === 0)) {
            t.loadData = []
          } else {
            // t.resData = JSON.parse(JSON.stringify(resData))
            t.loadData = resData.records // 更新列表
          }
        })
        .catch(error => {
          t.loading = false
          this.$message.error(error.message)
        })
    },

    // 表2
    getGmGrade(indexGroup) {
      apiService(
        auditDetails({
          indexYearMonth: this.yearMonthList.val.value,
          indexGroup: indexGroup
        })
      )
        .then(res => {
          this.loading2 = false
          if (!res.success) {
            this.$message.error(res.message)
            return
          }
          let items = res.result.items;(this.columnsController = items.map(function(item) {
            if(item.name==='指标'|| item.name==='数据项'){
              return {
                title: item.name,
                dataIndex: item.code,
                key: item.code,
                fixed: 'left',
                width:250
              }
            }else {
            return {
              title: item.name,
              dataIndex: item.code,
              key: item.code,
              width:180
            }}
          })),

         /*   this.columnsController.push({
              title: 111,
              dataIndex: 1111,
              key: 111,
              width:180});*/
            this.rowWidth=(this.columnsController.length-2)*180+500;

            (this.dataController = res.result.values)
          this.detailsTitle = res.result.detailsTitle
        })
        .catch(error => {
          this.loading2 = false
          this.dataController = []
          this.$message.error(error.message)
        })
    },
    // 按钮审核
    tj(name, type) {
      if (type == 0) {
        //审核
        this.visible = true
        this.indexGroup = name
      } else {
        //提交
        let formData = {
          auditComments: '',
          indexYearMonth: this.yearMonthList.val.value,
          auditType: 'atSubmit',
          indexGroup: this.indexGroup
        }
        apiService(auditAction(formData))
          .then(res => {
            if (res.success) {
              this.$message.success(res.message)
              this.searchQuery()
            } else {
              this.$message.warning(res.message)
            }
          })
          .finally(() => {
            this.close()
          })
      }
    },
    handleClickRow(record, index) {
      return {
        on: {
          click: () => {
            console.log(record)
            console.log('序号索引index' + index)
            this.loading2 = true
            this.getGmGrade(record.indexGroup)
          }
        }
      }
    },
    //  handleClickRow1(record, index) {
    //     if(record.indexValueName == "小计"){
    //       this.minor="minor"
    //     }
    // },
    minor(record) {
      let className = 'minor'
      if (record.showColor == '1') {
        return className
      }
    },
    close() {
      this.$emit('close')
      this.visible = false
    },
    /* 监听审核阶段的改变 */
    changeStep(e) {
      this.auditStep = e.target.value;
    },
    // 单选
    statisticst(e) {
      if (this.tabStatus === 'atAccept') {
        this.auditType = e.target.value
      } else {
        this.auditType = e.target.value
      }
    },
    handleOk() {
      const that = this
      // 触发表单验证
      this.form.validateFields((err, values) => {
        if (!err) {
          that.confirmLoading = true
          let formData = {
            auditComments:values.auditComments,
            indexYearMonth: this.yearMonthList.val.value,
            auditStep: this.auditStep,  // 审核阶段
            auditType: this.auditType,
            indexGroup: this.indexGroup
          }
          // httpAction(httpurl, formData, 'post')
          apiService(auditAction(formData))
            .then(res => {
              if (res.success) {
                that.$message.success(res.message)
                this.searchQuery()
                that.$emit('ok')
              } else {
                that.$message.warning(res.message)
              }
            })
            .finally(() => {
              that.confirmLoading = false
              that.close()
            })
        }
      })
    },
    handleCancel() {
      this.close()
    }
  }
}
</script>
<!-- js end -->


<!-- css start -->
<style lang="scss" scoped>
.ant-card /deep/ {
  .ant-row {
    .ant-table-title {
      font-size: 16px;
      font-weight: 900;
      color: #333;
    }

    .ant-table-wrapper .ant-table-tbody {
      .minor {
        font-weight: bold;
        background-color: #FFCBB3;
      }
    }
  }

  .ant-table table { white-space: nowrap; }
}
</style>


